<template>
	<div class='system-dic-container'>
		<el-card shadow='hover'>
			<div class='system-user-search mb15'>
				<el-input size='default' v-model='name' placeholder='请输入字典名称' style='max-width: 180px'></el-input>
				<el-button size='default' type='primary' class='ml10' @click='onQuery'>
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button v-auth="'/system-admin/sys-dic/add'" size='default' type='success' class='ml10' @click='onOpenAddDic'>
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增字典
				</el-button>
			</div>
			<el-table :data='tableData.records' style='width: 100%'>
				<el-table-column type='index' prop='id' label='序号' width='100' />
				<el-table-column prop='name' label='字典名称' show-overflow-tooltip></el-table-column>
				<el-table-column prop='code' label='字段名' show-overflow-tooltip></el-table-column>
				<el-table-column prop='status' label='字典状态' show-overflow-tooltip>
					<template #default='scope'>
						<el-tag type='success' v-if='scope.row.status'>启用</el-tag>
						<el-tag type='info' v-else>禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop='describes' label='字典描述' show-overflow-tooltip></el-table-column>
				<el-table-column prop='creationTime' label='创建时间' show-overflow-tooltip></el-table-column>
				<el-table-column label='操作' width='100'>
					<template #default='scope'>
						<el-button v-auth="'/system-admin/sys-dic/edit'" size='small' type='text' @click='onOpenEditDic(scope.row)'>修改</el-button>
						<el-button v-auth="'/system-admin/sys-dic/del'" size='small' type='text' @click='onRowDel(scope.row)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change='onHandleSizeChange'
				@current-change='onHandleCurrentChange'
				class='mt15'
				:pager-count='5'
				:page-sizes='[10, 20, 30]'
				v-model:current-page='tableData.param.current'
				background
				v-model:page-size='tableData.param.size'
				layout='total, sizes, prev, pager, next, jumper'
				:total='tableData.total'
				:page-size='tableData.pages'
			>
			</el-pagination>
		</el-card>
		<AddDic ref='addDicRef' />
		<EditDic ref='editDicRef' />
	</div>
</template>

<script lang='ts'>
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddDic from '/@/views/system/dic/component/addDic.vue';
import EditDic from '/@/views/system/dic/component/editDic.vue';
import { TableDataState } from '/@/utils/page';
import { useDicApi } from '/@/api/dic';
import { toRaw } from '@vue/reactivity';

// 定义接口来定义对象的类型
interface RuleFormList {
	key: string;
	value: string;
}

// 定义接口来定义对象的类型
interface TableDataRow {
	id: number;
	name: string;
	code: string;
	content: RuleFormList[];
	describes: string;
	status: boolean;
	creationTime: string;
}

interface TableQueryData {
	name: string;
}

export default defineComponent({
	name: 'systemDic',
	components: { AddDic, EditDic },
	setup: function() {
		const addDicRef = ref();
		const editDicRef = ref();
		const tableDataState = reactive<TableDataState<TableDataRow>>({
			tableData: {
				data: [],
				total: 0,
				pages: 0,
				loading: false,
				param: {
					current: 1,
					size: 10,
				},
			},
		});
		const queryDataState = reactive<TableQueryData>({
			name: '',
		});
		// 初始化表格数据
		const initTableData = async () => {
			await query();
		};
		const query = async () => {
			let queryInputData = {
				name: queryDataState.name,
				current: tableDataState.tableData.param.current,
				size: tableDataState.tableData.param.size,
			};
			let result = await useDicApi().getPage(queryInputData) as any;
			tableDataState.tableData.records = result['records'];
			tableDataState.tableData.total = result['total'];
			tableDataState.tableData.pages = result['pages'];
			console.log(result);
		};
		// 打开新增字典弹窗
		const onOpenAddDic = () => {
			addDicRef.value.openDialog();
		};
		// 打开修改字典弹窗
		const onOpenEditDic = (row: TableDataRow) => {
			editDicRef.value.openDialog(row);
		};
		// 删除字典
		const onRowDel = (row: TableDataRow) => {
			ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.name}”，是否继续?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const inputData = {
						id: [row.id],
					};
					await useDicApi().del(inputData);
					ElMessage.success('删除成功');
				})
				.catch(() => {
				});
		};
		// 分页改变
		const onHandleSizeChange = async (val: number) => {
			tableDataState.tableData.param.size = val;
			await query();
		};
		// 分页改变
		const onHandleCurrentChange = async (val: number) => {
			tableDataState.tableData.param.current = val;
			await query();
		};
		const onQuery = async () => {
			await query();
		};
		// 页面加载时
		onMounted(async () => {
			await initTableData();
		});
		return {
			addDicRef,
			editDicRef,
			onOpenAddDic,
			onQuery,
			onOpenEditDic,
			onRowDel,
			onHandleSizeChange,
			onHandleCurrentChange,
			...toRefs(tableDataState),
			...toRefs(queryDataState),
		};
	},
});
</script>
